<template>
  <div class="batch-deliver">
    <!-- 导航栏 start -->
    <van-nav-bar
      title="批量投递"
      z-index="9999"
      right-text="换一换"
      @click-left="onClickLeft"
      @click-right="onClickRight"
      left-arrow
      fixed
    />
    <!-- 导航栏 end -->

    <!-- 批量列表 start -->
    <van-list class="batch-deliver-list">
      <div class="batch-item" v-for="(item, index) in jobs" :key="index">
        <van-checkbox
          v-model="item.checked"
          icon-size="19px"
          checked-color="#f70"
          style="margin-top: 3.5px"
        ></van-checkbox>
        <div class="info" @click="onJobClick(item.jobid)">
          <p class="bar01">
            <span>{{ item.jobName }}</span>
            <span>{{ item.monthPayVal }}</span>
          </p>
          <p class="bar02">
            <span
              >{{ item.jobWorkAddressVal.replace("嘉兴市->", "") }} |
              {{ item.eduVal }} | {{ item.workyearsVal }}</span
            >
            <span v-if="item.isJiZhao == true">急招</span>
          </p>
          <p
            class="bar03"
            v-if="item.welfareVal != null && item.welfareVal != ''"
          >
            <span
              v-for="item_wel in item.welfares.slice(0, 3)"
              :key="item_wel"
              >{{ item_wel }}</span
            >
            <span v-if="item.welfares.length >= 4">...</span>
          </p>
          <p class="bar04 vip" @click.stop="onCompanyClick(item.companyid)">
            <span>{{ item.companyName }}</span>
            <span>{{ item.publishDateVal }}</span>
            <img
              src="@/assets/img/firm_default_avatar.png"
              v-if="item.logoURL === ''"
            />
            <img :src="item.logoURL" v-else />
          </p>
        </div>
      </div>
    </van-list>
    <!-- 批量列表 end -->

    <!-- 批量操作 start -->
    <div class="batch-operate">
      <p>
        <van-checkbox
          v-model="isCheckedAll"
          icon-size="19px"
          checked-color="#f70"
          >全选</van-checkbox
        >
        <sup>{{ select_jobs.length }}</sup>
      </p>
      <p>
        <van-button
          type="primary"
          text="投递简历"
          :loading="loading_apply"
          @click="onApply"
        ></van-button>
      </p>
    </div>
    <!-- 批量操作 end -->
  </div>
</template>

<script>
import {
  NavBar,
  List,
  Button,
  Checkbox,
  CheckboxGroup,
  Toast,
  Dialog,
} from "vant";
import { searchJobs, PersonLoginedApplyJob } from "@/util/http";
import { mixin_person_toJobCompany } from "@/mixin/mixins";
export default {
  name: "SearchResultMoreApply",
  components: {
    [NavBar.name]: NavBar,
    [List.name]: List,
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
  },
  mixins: [mixin_person_toJobCompany],
  mounted() {
    let filter_kw = this.$route.params.filter_kw;
    if (filter_kw) {
      this.filter_kw = filter_kw;
    }
    this.getList();
  },
  // 定义属性
  data() {
    return {
      loading: true,
      finished: false,
      page: 0,
      jobs: [],
      select_jobs: [],
      isCheckedAll: false,

      loading_apply: false,
      filter_kw: "",
    };
  },
  computed: {
    jobids() {
      let arr = [];
      this.select_jobs.forEach((item) => {
        arr.push(item.jobid);
      });
      return arr.join();
    },
    jobnames() {
      let arr = [];
      this.select_jobs.forEach((item) => {
        arr.push(item.jobName);
      });
      return arr.join();
    },
  },
  watch: {
    jobs: {
      deep: true,
      handler: function (newV, oldV) {
        this.select_jobs = this.jobs.filter((item) => {
          return item.checked === true;
        });
      },
    },
    select_jobs() {
      this.isCheckedAll = this.select_jobs.length === this.jobs.length;
    },
    isCheckedAll() {
      this.jobs.forEach((item) => {
        item.checked = this.isCheckedAll;
      });
    },
  },
  // 方法集合
  methods: {
    async getList() {
      this.finished = false;
      let page = this.page;
      if (page === 0) {
        this.jobs = [];
      }
      page++;
      this.page = page;
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      await searchJobs(page, 20, this.filter_kw).then((res) => {
        this.loading = false;
        if (res.list.length > 0) {
          this.jobs = [];
          res.list.forEach((item) => {
            item.checked = false;
            this.jobs.push(item);
          });
        } else {
          Toast("已经是最后一批了");
        }
      });
    },
    onClickRight() {
      this.getList();
    },
    //投递
    onApply() {
      if (this.select_jobs.length === 0) {
        Toast("请选择职位");
        return;
      }
      Dialog.confirm({
        message: "确认投递职位？",
        confirmButtonText: "投递",
      })
        .then(() => {
          this.loading_apply = true;
          PersonLoginedApplyJob(this.jobids, this.jobnames).then((res) => {
            console.log(res);
            this.loading_apply = false;
            Toast(res.msg);
            if (res.result === 1) {
              setTimeout(() => {
                this.getList();
              }, 1000);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/common.less";
/* 批量操作 */
.batch-deliver .batch-operate {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 666;
  display: flex;
  border-top: 0.5px solid #ddd;
  background-color: #fff;
}

.batch-deliver .batch-operate p {
  display: flex;
  flex: 0 0 140px;
  align-items: center;
  height: 46px;
}

.batch-deliver .batch-operate p:nth-child(1) {
  flex: 1;
  padding: 0 15px;
}

.batch-deliver .batch-operate p sup {
  margin-left: 5px;
  font-size: 16px;
  color: #f70;
}

.batch-deliver .batch-operate p sup::before {
  content: "( ";
  color: #333;
}

.batch-deliver .batch-operate p sup::after {
  content: "/20 )";
  color: #333;
}

.batch-deliver .batch-operate p button {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 46px;
  border: 0;
  border-radius: 0;
  background-color: #f70;
  font-size: 18px;
}

/* 批量列表 */
.batch-deliver-list {
  display: flex;
  flex-direction: column;
  margin-top: 46px;
  margin-bottom: 46.5px;
}

.batch-deliver-list .batch-item {
  display: flex;
  align-items: flex-start;
  padding: 18px 15px 0;
  margin-bottom: 10px;
  background-color: #fff;
}

.batch-deliver-list .batch-item .info {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 12px;
  background-color: #fff;
}

.batch-deliver-list .batch-item .info p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  overflow: hidden;
}

.batch-deliver-list .batch-item .info p.bar01 {
  font-size: 17px;
  font-weight: 500;
}

.batch-deliver-list .batch-item .info p.bar01 span:nth-child(1) {
  display: -webkit-box;
  flex: 1;
  color: #000;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.batch-deliver-list .batch-item .info p.bar01 span:nth-child(2) {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 90px;
  color: #f40;
}

.batch-deliver-list .batch-item .info p.bar02 span:nth-child(1) {
  font-size: 13px;
  color: #666;
}

.batch-deliver-list .batch-item .info p.bar02 span:nth-child(2) {
  padding: 0 4px;
  border-radius: 3px;
  background-color: #f66;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
}

.batch-deliver-list .batch-item .info p.bar03 {
  justify-content: flex-start;
  padding-bottom: 6px;
}

.batch-deliver-list .batch-item .info p.bar03 span {
  padding: 2px 7px;
  border-radius: 3px;
  margin-right: 6px;
  background-color: rgba(0, 0, 0, 0.04);
  font-size: 12px;
  color: #666;
}

.batch-deliver-list .batch-item .info p.bar04 {
  position: relative;
  padding: 14px 0 14px 30px;
  border-top: 1px solid #f7f7f7;
  margin-bottom: 0;
  font-size: 13px;
}

.batch-deliver-list .batch-item .info p.bar04.vip:after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 14px;
  z-index: 10;
  width: 12px;
  height: 12px;
  background: url("@/assets/img/home/vip-ico.png") no-repeat center / 12px;
}

.batch-deliver-list .batch-item .info p.bar04 img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  margin-top: -11px;
}

.batch-deliver-list .batch-item .info p.bar04 span:nth-child(1) {
  display: -webkit-box;
  flex: 1;
  color: #666;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.batch-deliver-list .batch-item .info p.bar04 span:nth-child(2) {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 90px;
  color: #999;
}
</style>
